@mixin extjs-splitter {
  .#{$prefix}splitter {
    .#{$prefix}collapse-el {
      position: absolute;

      cursor: pointer;

      background-color: transparent;
      background-repeat: no-repeat !important;
    }
  }

  .#{$prefix}layout-split-left,
  .#{$prefix}layout-split-right {
    top: 50%;

    margin-top: -17px;

    width: 5px;
    height: 35px;
  }

  .#{$prefix}layout-split-top,
  .#{$prefix}layout-split-bottom {
    left: 50%;

    width: 35px;
    height: 5px;

    margin-left: -17px;
  }

  .#{$prefix}layout-split-left {
    background: no-repeat top right;
    background-image: theme-background-image($theme-name, 'util/splitter/mini-left.gif');
  }

  .#{$prefix}layout-split-right {
    background: no-repeat top left;
    background-image: theme-background-image($theme-name, 'util/splitter/mini-right.gif');
  }

  .#{$prefix}layout-split-top {
    background: no-repeat top left;
    background-image: theme-background-image($theme-name, 'util/splitter/mini-top.gif');
  }

  .#{$prefix}layout-split-bottom {
    background: no-repeat top left;
    background-image: theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
  }

  .#{$prefix}splitter-collapsed {
    .#{$prefix}layout-split-left {
      background: no-repeat top left;
      background-image: theme-background-image($theme-name, 'util/splitter/mini-right.gif');
    }

    .#{$prefix}layout-split-right {
      background: no-repeat top right;
      background-image: theme-background-image($theme-name, 'util/splitter/mini-left.gif');
    }

    .#{$prefix}layout-split-top {
      background: no-repeat top left;
      background-image: theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
    }

    .#{$prefix}layout-split-bottom {
      background: no-repeat top left;
      background-image: theme-background-image($theme-name, 'util/splitter/mini-top.gif');
    }
  }

  .#{$prefix}splitter-horizontal {
    cursor: e-resize;
    cursor: row-resize;
    font-size: 1px;
  }

  .#{$prefix}splitter-vertical {
    cursor: e-resize;
    cursor: col-resize;
    font-size: 1px;
  }
  .#{$prefix}splitter-collapsed, .#{$prefix}splitter-horizontal-noresize, .#{$prefix}splitter-vertical-noresize {
    cursor: default;
  }

  .#{$prefix}splitter-active {
    z-index: 4;
    font-size: 1px;
    background-color: rgb(180, 180, 180);
    @include opacity(0.8);
  }
  .#{$prefix}splitter-active {
    .#{$prefix}collapse-el {
      @include opacity(0.3);
    }
  }

  .#{$prefix}proxy-el {
    position: absolute;
    background: rgb(180, 180, 180);
    @include opacity(0.8);
  }
}